<h1>Float Classes</h1>
<p>Trongate CSS provides two utility classes for floating elements either to the left or right side of their container.</p>
<ol>
  <li><code>.float-left</code></li>
  <li><code>.float-right</code></li>
</ol>
<p>Within Trongate CSS, float classes are combined with relative positioning to maintain proper layout control. For example:</p>
[code=css]
.float-right {
  float: right;
  position: relative;
}
[/code]
<p>The combination of float and relative positioning ensures that floated elements maintain their position in the document flow while allowing other content to wrap around them.</p>

<hr>
<h2>Left Float</h2>
<p>To float an element to the left, use the <code>.float-left</code> class. This is commonly used for images that should have text wrapping around their right side.</p>
[code=html]
&lt;div&gt;
  &lt;div class="float-left mr-1" style="width: 100px; height: 100px; background: #4682b4;"&gt;&lt;/div&gt;
  &lt;p&gt;This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.&lt;/p&gt;
&lt;/div&gt;
[/code]
<p>Here's how it affects the layout:</p>
<div class="trongate-css-demo">
  <div>
    <div class="float-left mr-1" style="width: 100px; height: 100px; background: #4682b4;"></div>
    <p>This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a left-floated element. Notice how the text flows naturally around the blue box.</p>
  </div>
</div>
<hr>
<h2>Right Float</h2>
<p>To float an element to the right, use the <code>.float-right</code> class. This is useful for elements that should align to the right with content wrapping around their left side.</p>
[code=html]&lt;div&gt;
  &lt;div class="float-right ml-1" style="width: 100px; height: 100px; background: #4682b4;" &gt;&lt;/div&gt;
  &lt;p&gt;This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.&lt;/p&gt;
&lt;/div&gt;[/code]
<p>Here's how it affects the layout:</p>
<div class="trongate-css-demo">
  <div>
    <div style="width: 100px; height: 100px; background: #4682b4;" class="float-right ml-1"></div>
    <p>This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  This text demonstrates how content wraps around a right-floated element. Notice how the text flows naturally around the blue box.  </p>
  </div>
</div>
<div class="alert alert-success">
  <p class="mt-0">Float classes are especially useful for working with images and other media elements within text content, enabling more dynamic and engaging layouts.</p>
  <p>When you float an item, such as an image, it's a good practice to add margins to create a gap between the floated element and the surrounding text. If you examine the two examples above closely, you'll notice this is achieved through the use of the <code>.ml-1</code> and <code>.mr-1</code> classes. These classes set a left margin of '1em' and a right margin of '1em', respectively.</p>
</div>
<h2>Summary</h2>
<p>Trongate CSS provides two float utility classes:</p>
<ul>
  <li>
    <code>.float-left</code> – Floats elements to the left with relative positioning
  </li>
  <li>
    <code>.float-right</code> – Floats elements to the right with relative positioning
  </li>
</ul>
<p>Both classes include relative positioning to maintain proper layout control while allowing content to flow naturally around the floated elements.</p>


